<template>
  <div class="admin-manage-container">
    <!-- 咨询师管理区域 -->
    <div class="manage-section">
      <h2 class="section-title">咨询师管理</h2>
      <div style="margin-bottom: 12px;">
        <el-input v-model="consultantSearch" placeholder="请输入用户名" style="width: 200px; margin-right: 8px;" clearable />
        <el-button type="primary" @click="onConsultantSearch">查询</el-button>
        <el-button @click="resetConsultantSearch">重置</el-button>
      </div>
      <el-table :data="filteredConsultantList" style="width: 100%" border stripe highlight-current-row>
        <el-table-column label="用户名" prop="username" align="center"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
        <el-table-column label="性别" prop="gender" align="center">
          <template #default="scope">
            {{ scope.row.gender === 'Male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="editConsultant(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteConsultant(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="action-bar">
        <el-button @click="addConsultantDialogVisible = true" type="primary">添加咨询师</el-button>
      </div>
    </div>
    <!-- 添加咨询师对话框 -->
    <el-dialog v-model="addConsultantDialogVisible" title="添加咨询师" width="400px">
      <el-form :model="addConsultantForm" label-width="80px">
        <el-form-item label="用户名"><el-input v-model="addConsultantForm.username"></el-input></el-form-item>
        <el-form-item label="密码"><el-input v-model="addConsultantForm.password" show-password></el-input></el-form-item>
        <el-form-item label="年龄"><el-input v-model="addConsultantForm.age" type="number"></el-input></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addConsultantForm.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addConsultantDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addConsultant">确定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑咨询师对话框 -->
    <el-dialog v-model="editConsultantDialogVisible" title="编辑咨询师" width="400px">
      <el-form :model="editConsultantForm" label-width="80px">
        <el-form-item label="用户名"><el-input v-model="editConsultantForm.username" disabled></el-input></el-form-item>
        <el-form-item label="密码"><el-input v-model="editConsultantForm.password" show-password></el-input></el-form-item>
        <el-form-item label="年龄"><el-input v-model="editConsultantForm.age" type="number"></el-input></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editConsultantForm.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editConsultantDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateConsultant">确定</el-button>
      </template>
    </el-dialog>

    <!-- 用户管理区域 -->
    <div class="manage-section user-section">
      <h2 class="section-title">用户管理</h2>
      <div style="margin-bottom: 12px;">
        <el-input v-model="userSearch" placeholder="请输入用户名" style="width: 200px; margin-right: 8px;" clearable />
        <el-button type="primary" @click="onUserSearch">查询</el-button>
        <el-button @click="resetUserSearch">重置</el-button>
      </div>
      <el-table :data="filteredUserList" style="width: 100%" border stripe highlight-current-row>
        <el-table-column label="用户名" prop="username" align="center"></el-table-column>
        <el-table-column label="年龄" prop="age" align="center"></el-table-column>
        <el-table-column label="性别" prop="gender" align="center">
          <template #default="scope">
            {{ scope.row.gender === 'Male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="action-bar">
        <el-button @click="addUserDialogVisible = true" type="primary">添加用户</el-button>
      </div>
    </div>
    <!-- 添加用户对话框 -->
    <el-dialog v-model="addUserDialogVisible" title="添加用户" width="400px">
      <el-form :model="addUserForm" label-width="80px">
        <el-form-item label="用户名"><el-input v-model="addUserForm.username"></el-input></el-form-item>
        <el-form-item label="密码"><el-input v-model="addUserForm.password" show-password></el-input></el-form-item>
        <el-form-item label="年龄"><el-input v-model="addUserForm.age" type="number"></el-input></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addUserForm.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addUser">确定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑用户对话框 -->
    <el-dialog v-model="editUserDialogVisible" title="编辑用户" width="400px">
      <el-form :model="editUserForm" label-width="80px">
        <el-form-item label="用户名"><el-input v-model="editUserForm.username" disabled></el-input></el-form-item>
        <el-form-item label="密码"><el-input v-model="editUserForm.password" show-password></el-input></el-form-item>
        <el-form-item label="年龄"><el-input v-model="editUserForm.age" type="number"></el-input></el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editUserForm.gender" placeholder="请选择性别">
            <el-option label="男" value="Male"></el-option>
            <el-option label="女" value="Female"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editUserDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateUser">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 咨询师
const consultantList = ref([]);
const addConsultantDialogVisible = ref(false);
const editConsultantDialogVisible = ref(false);
const addConsultantForm = ref({ username: '', password: '', age: '', gender: '' });
const editConsultantForm = ref({ id: '', username: '', password: '', age: '', gender: '' });
const consultantSearch = ref('');
const filteredConsultantList = computed(() => {
  if (!consultantSearch.value) return consultantList.value;
  return consultantList.value.filter(u => u.username && u.username.includes(consultantSearch.value));
});
const onConsultantSearch = () => {
  // 触发计算属性刷新即可
};
const resetConsultantSearch = () => {
  consultantSearch.value = '';
};

// 用户
const userList = ref([]);
const addUserDialogVisible = ref(false);
const editUserDialogVisible = ref(false);
const addUserForm = ref({ username: '', password: '', age: '', gender: '' });
const editUserForm = ref({ id: '', username: '', password: '', age: '', gender: '' });
const userSearch = ref('');
const filteredUserList = computed(() => {
  if (!userSearch.value) return userList.value;
  return userList.value.filter(u => u.username && u.username.includes(userSearch.value));
});
const onUserSearch = () => {
  // 触发计算属性刷新即可
};
const resetUserSearch = () => {
  userSearch.value = '';
};

onMounted(() => {
  getConsultantList();
  getUserList();
});

const getConsultantList = async () => {
  const res = await axios.get('/api/consultant/list.do');
  consultantList.value = res.data.data || [];
};
const getUserList = async () => {
  const res = await axios.get('/api/user/list.do');
  userList.value = res.data.data || [];
};

// 咨询师操作
const addConsultant = async () => {
  const params = new URLSearchParams();
  params.append('username', addConsultantForm.value.username);
  params.append('password', addConsultantForm.value.password);
  params.append('age', addConsultantForm.value.age);
  params.append('gender', addConsultantForm.value.gender);
  const res = await axios.post('/api/consultant/insert.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('添加成功');
    addConsultantDialogVisible.value = false;
    addConsultantForm.value = { username: '', password: '', age: '', gender: '' };
    getConsultantList();
  } else {
    ElMessage.error(res.data.message || '添加失败');
  }
};
const editConsultant = (row) => {
  editConsultantForm.value = { ...row };
  editConsultantDialogVisible.value = true;
};
const updateConsultant = async () => {
  const params = new URLSearchParams();
  params.append('id', editConsultantForm.value.id);
  params.append('username', editConsultantForm.value.username);
  params.append('password', editConsultantForm.value.password);
  params.append('age', editConsultantForm.value.age);
  params.append('gender', editConsultantForm.value.gender);
  const res = await axios.post('/api/consultant/update.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('修改成功');
    editConsultantDialogVisible.value = false;
    getConsultantList();
  } else {
    ElMessage.error(res.data.message || '修改失败');
  }
};
const deleteConsultant = async (id) => {
  const params = new URLSearchParams();
  params.append('id', id);
  const res = await axios.post('/api/consultant/deleteById.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('删除成功');
    getConsultantList();
  } else {
    ElMessage.error(res.data.message || '删除失败');
  }
};

// 用户操作
const addUser = async () => {
  const params = new URLSearchParams();
  params.append('username', addUserForm.value.username);
  params.append('password', addUserForm.value.password);
  params.append('age', addUserForm.value.age);
  params.append('gender', addUserForm.value.gender);
  const res = await axios.post('/api/user/insert.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('添加成功');
    addUserDialogVisible.value = false;
    addUserForm.value = { username: '', password: '', age: '', gender: '' };
    getUserList();
  } else {
    ElMessage.error(res.data.message || '添加失败');
  }
};
const editUser = (row) => {
  editUserForm.value = { ...row };
  editUserDialogVisible.value = true;
};
const updateUser = async () => {
  const params = new URLSearchParams();
  params.append('id', editUserForm.value.id);
  params.append('username', editUserForm.value.username);
  params.append('password', editUserForm.value.password);
  params.append('age', editUserForm.value.age);
  params.append('gender', editUserForm.value.gender);
  const res = await axios.post('/api/user/update.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('修改成功');
    editUserDialogVisible.value = false;
    getUserList();
  } else {
    ElMessage.error(res.data.message || '修改失败');
  }
};
const deleteUser = async (id) => {
  const params = new URLSearchParams();
  params.append('id', id);
  const res = await axios.post('/api/user/deleteById.do', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } });
  if (res.data.code === 200) {
    ElMessage.success('删除成功');
    getUserList();
  } else {
    ElMessage.error(res.data.message || '删除失败');
  }
};
</script>

<style scoped>
.admin-manage-container {
  max-width: 1100px;
  margin: 30px auto;
  background: #fff;
  padding: 32px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}
.action-bar {
  margin: 16px 0;
  text-align: right;
}
</style>